*{
  padding: 0;
  margin:0;
  user-select: none;
}

body{
  width: 100vw;
  height: 100vh;
  background-color: #000;
  display: flex;
  justify-content: center; 
  align-items: center;
}

.container{
  width: 100%;
  height: auto;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .show{
    width: 50vw;
    height: 20vw;
    background-repeat: no-repeat;
    background-size: 50vw 20vw;
    background-position: center;
    margin-bottom: 30px;
    transition: .5s;
    border: none;
  }

  .breviary-wrap{
    position: relative;
    width: auto;
    height: 6vw;
    padding: 30px 20px;
    background:transparent ;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    @for $i from 1 to 6 {
      .breviary_#{$i}{
        box-sizing: border-box;
        width: 200px;
        height: 100px;
        padding: 10px;
      }
    }

    .frame{
      display: block;
      position: absolute;
      width: 180px;
      height: 80px;
      border: 10px solid cyan;
      pointer-events:none;

      &::after{
        content:'';
        position: absolute;
        top: -40px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 40px;
        background-color: cyan;
        pointer-events:none;
        clip-path: polygon(0 30px,25% 30px,50% 40%,75% 30px,100% 30px);
      }
    }
    
  }
}

